<style lang="sass" scoped>
	#modelSelect {
		display: flex;
		height: 100%;
		background: #fff;
		position: relative;
		flex-direction: column;
		.selectTab {
			width: 100%;
			height: 8.5rem;
			display: flex;
			flex-direction: column;
			ul.nav {
				width: 100%;
				height: 4rem;
				display: flex;
				li {
					flex: 1;
					height: 100%;
					background: #F1F1F1;
					text-align: center;
					font-size: 1.3rem;
					line-height: 4rem;
					border-bottom: 1px solid #ccc;
					border-right: 1px solid #ccc;
					width: 100%;
    				overflow: hidden;
    				text-overflow: ellipsis;
				    display: flex;
				    -webkit-line-clamp: 1;
				    flex-direction: column;
					&:last-child {
						border-right: none;
					}
				}
				li.active {
					background: #fff;
					border-bottom: none;
				}
			}
		}
		.selectSearch {
			width: 100%;
			height: 5rem;
			background: #fff;
			padding: 1rem;
			.selectSearch_item {
				width: 100%;
				height: 3rem;
				display:flex;
				background: #F1F1F1;
				border-radius: 0.5rem;
				border: 1px solid #ccc;
				box-sizing: border-box;
				span {
					display: inline-block;
					width: 3rem;
					height: 100%;
					font-size: 1.5rem;
					color: #999;
					text-align: center;
					line-height: 3rem;
				}
				input {
					display: block;
					height: 100%;
					line-height: 3rem;
					flex: 1;
					font-size: 1.3rem;
					background: #F1F1F1;
					outline: none;
					text-align: center;
					border-bottom-right-radius: 0.5rem;
					border-top-right-radius: 0.5rem;
				}
			}
		}
		.bsmContent {
			height: 100%;
			width: 100%;
			overflow: auto;
			display:flex;
			flex: 1;
			flex-direction: column;
			/*品牌style*/
			.brandContent {
				flex: 1;
				overflow: auto;
				.comList {
					width: 100%;
					height: auto;
					.itemList {
						background: #FCFCFC;
						border-bottom: 1px solid #e5e5e5;
						.title {
							color: #999;
							line-height: 3rem;
							padding: 0 1rem;
							font-size: 1.2rem;
							background: #f1f1f1;
						}
						ul {
							background: #fff;
							border-top: 1px solid #e5e5e5;
							padding: 0 .5rem;
							li {
								display: inline-block;
								margin: .5rem .6rem;
								position: relative;
								cursor: pointer;
								padding: 0 1rem .5rem;
								border-radius: .3rem;
								border-top-right-radius: 0;
								border: 1px solid transparent;
								-webkit-transition: all .3s;
								transition: all .3s;
								.imgBox {
									position: relative;
									width: 4rem;
									height: 4rem;
									margin: .5rem auto;
								}
								p {
									text-align: center;
									font-size: .7rem;
									color: #666;
								}
							}
						}
					}
				}
			}
			/*车系style*/
			.seriesContent {
				width: 100%;
				height: 100%;
				background: #fff;
				padding-bottom: 9rem;
				.seriesList {
					width: 20%;
					height: auto;
					float: left;
					text-align: center;
					padding-top: 0.5rem;
					.imgBox {
						width: 5rem;
						height: 5rem;
						justify-content: center;
						align-items: center;
						overflow: hidden;
						margin: 0 auto;
					}
					p {
						text-align: center;
						width: 100%;
						height: 2rem;
						line-height: 2rem;
					}
				}
			}
			.bsmContent_model {
				flex: 1;
				height: 100%;
				width: 100%;
				display:flex;
				overflow: hidden;
				.modelContent {
					flex: 1;
					display: flex;
					background: #fff;
					.modelTime {
						width: 6rem;
						overflow: auto;
						background: #F1F1F1;
						text-align: center;
						div {
							height: 3rem;
							line-height: 3rem;
							text-align: center;
							position: relative;
							cursor: pointer;
							font-size: 1.26rem;
							&.active {
								background: #fff;
							}
							&.active:after {
								position: absolute;
								content: "";
								width: 3px;
								height: 100%;
								left: 0;
								top: 0;
								background: #f20000;
							}
						}
					}
					.modelList {
						flex: 1;
						background: #fff;
						position: relative;
						overflow: auto;
						.listView {
							display: flex;
							align-items: center;
							border-bottom: 1px solid #f1f1f1;
							transition: all .2s;
							padding: .5rem 1rem;
							cursor: pointer;
							-webkit-transition: all .3s;
							transition: all .3s;
							.listImg {
								width: 4rem;
								height: 4rem;
								position: relative;
								background: #EDEDED;
								overflow: hidden;
								margin-right: 1rem;
								display: flex;
								justify-content: center;
								align-items: center;
							    border-radius: 0.3rem;
								i{
									font-size: 0;  
								    line-height: 0;  
								    border-width: 1.3rem;  
								    border-color:#1973BF;  
								    border-left-width: 0;  
								    border-style: dashed;  
								    border-right-style: solid;  
								    border-top-color: transparent;  
								    border-bottom-color: transparent;  
								    position: absolute;
								    right: -0.2rem;
								    bottom: -0.8rem;
								    color: #fff;
								    -webkit-transform: rotate(225deg);
								    
								}
								label{
									position: absolute;
								   bottom: 0rem;
								   right: 0rem;
								   width: 1rem;
								   height: 1rem;
								   background: url(search.png) no-repeat center center;
								   background-size: 100% 100%;
								    
								    
								}
								img{
									width: 100%;
									height: 100%;
								}
							}
							.content {
								flex: 1;
								color: #101010;
								line-height: 1.5rem;
								width: 100%;
								font-size: 1.26rem;
								color: #333;
							}
						}
					}
				}
			}
		}
		.notBranInfo {
			width: 100%;
			height: 15rem;
			display:flex;
			flex-direction: column;
			i {
				font-size: 8rem;
				display: inline-block;
				width: 100%;
				height: 10rem;
				color: #999;
				text-align: center;
			}
			span {
				display: inline-block;
				font-size: 1.5rem;
				width: 100%;
				height: 3rem;
				line-height: 3rem;
				text-align: center;
			}
		}
		.rightBarBox {
			height: 100%;
			position: absolute;
			width: 4rem;
			top: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			pointer-events: none;
			z-index: 100;
			.rightBar {
				width: 100%;
				pointer-events: all;
				div {
					text-align: center;
					color: #666;
					font-size: 1.2rem;
					text-align: right;
					padding-right: 1rem;
					height: 1.6rem;
					line-height: 1.6rem;
				}
			}
		}
		.currentLetter {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			span {
				width: 5rem;
				height: 5rem;
				background: #ccc;
				text-align: center;
				line-height: 5rem;
				color: #fff;
				font-size: 1.5rem;
				box-shadow: 0 0 5px #ccc
			}
		}
		.wslTitleLogo{
			width: 100%;
			height: 3rem;
			background: url(../../libs/images/wsl.png) no-repeat center center;
			background-size: 100% 100%;
		}
	}
</style>

<template>
	<div id="modelSelect">	
		<div class="selectTab">
			<ul class="nav">
				<li :class="{'active':selectNavBar == 1}" v-touch:tap="toggleTab(1)">{{selectBrandName}}</li>
				<li :class="{'active':selectNavBar == 2}" v-touch:tap="toggleTab(2)">{{selectSeriesName}}</li>
				<li :class="{'active':selectNavBar == 3}" v-touch:tap="toggleTab(3)">{{selectModelName}}</li>
			</ul>
			<div class="selectSearch">
				<div class="selectSearch_item">
					<span class="iconfont icon-sousuo"></span>
					<input type="text" placeholder="快速搜索" v-model="serchTxt" />
				</div>
			</div>
		</div>
		<!--list msg-->
		<div class="bsmContent">
			<!--品牌-->
			<div class="brandContent" v-if="selectNavBar == 1">
				<div class="comList" v-if="filteredBrandList.length > 0">
					<div class="itemList" v-for="(key,row) in brandList | filterBy serchTxt" track-by="$index" data-tab={{key}}>
						<p class="title">{{key == 1?'热门品牌':key}}</p>
						<ul>
							<li v-for="item in row" track-by="$index" @click="selectBrand(item)">
								<div class="imgBox">
									<img src="../../libs/images/de_HQ.png" v-if="!item.icon">
									<img src="../../libs/images/de_HQ.png" v-else v-lazyload="item.icon" class="centerPer" />
								</div>
								<p>{{item.brandName}}</p>
							</li>

						</ul>
					</div>
				</div>

				<div class="notBranInfo" v-else>
					<i class="iconfont icon-zanwu"></i>
					<span>抱歉！匹配不到相关信息，请重新搜索</span>

				</div>
			</div>
			<!--车系-->
			<div class="seriesContent" v-if="selectNavBar == 2">
				<div class="seriesList" v-if="filteredSeriesList.length > 0 && item.icon" v-for="item in seriesList | filterBy serchTxt" track-by="id" @click="selectSeries(item)" >
					<div class="imgBox" v-if="item.icon">
						<img  src="../../libs/images/de_HQ.png" v-lazyload="item.icon" />
					</div>
					<p class="textOverflow_1" v-if="item.icon">{{item.seriesName}}</p>
				</div>
				<div class="notBranInfo" v-if="filteredSeriesList.length == 0 && selectNavBarSelect">
					<i class="iconfont icon-zanwu"></i>
					<span>抱歉！匹配不到相关信息，请重新搜索</span>
				</div>
			</div>
			<!--车型-->
			<div class="bsmContent_model" v-if="selectNavBar == 3">
				<!--车型组件-->
				<div class="modelContent">
					<div class="modelTime">
						<div :class="{'active':yearsIndex == key}" v-for="(key,item) in modelsList " track-by="$index" @click="selectYears(key)">{{key}}</div>
					</div>
					
					<div class="modelList">
						<div class="listView" v-if="filteredModelList.length > 0" v-for="item in modelsList[yearsIndex] | filterBy serchTxt" track-by="$index">
							<div class="listImg" v-touch:tap="showBigImg(item.icon)">
								<img src="../../libs/images/de_HQ.png" v-lazyload="item.icon">
								<i></i>
								<label></label>
							</div>
							<div class="content"  @click="checkModel(item)">
								<div class="textOverflow_1">
									<span class="text-orange">{{item.engine}}</span> {{item.modelName}}
								</div>
								<div class="textOverflow_1">
									<span class="text-cyan">参考价：{{item.price | currency '￥'}}万</span>
								</div>
							</div>
						</div>
						<div class="notBranInfo" v-if="filteredModelList.length == 0 && selectModelSelect">
							<i class="iconfont icon-zanwu"></i>
							<span>抱歉！匹配不到相关信息</span>
						</div>
					</div>
				</div>

			</div>
		</div>
		<tips></tips>
		<loading v-if="getLoading.show"></loading>
		<div class="rightBarBox" v-if="showRightBarBox && selectNavBar == 1">
			<div class="rightBar" id="rightBar" @touchstart="touchstart" @touchmove="touchMove" @touchend="touchEnd">
				<div v-for="(key,row) in brandList" v-touch:tap="selectLetter(key)">
					<span v-if="key == 1">热</span>
					<span v-else>{{key}}</span>
				</div>
			</div>
		</div>
		<div class="currentLetter" v-if="currentLetterShow">
			<span>{{currentLetter}}</span>
		</div>
	</div>

</template>

<script>
	
	var tipsAction = require("HQ_Actions").tips,
		tipsGetter = require("HQ_Getters").tips,
		loadingAction = require("HQ_Actions").loading,
		loadingGetter = require("HQ_Getters").loading;
	var HQ_Actions = frameScript.extend({}, [tipsAction, loadingAction], true),
		HQ_Getters = frameScript.extend({}, [tipsGetter, loadingGetter], true);
	module.exports = {
		init: function() {
			HQ_CALLBACK.modelSelect = {};
		},
		ready: function() {
			document.title ='车型选择';
			this.setLoading({ 'show': true })									
			var local = window.localStorage.getItem('modelParam')
			if(local != null){
				var params = JSON.parse(window.localStorage.getItem('modelParam'));
				this.$set('brandId',params.brandId);
				this.$set('seriesId',params.seriesId);
				this.$set('selectBrandName',params.brandName);
				this.$set('selectSeriesName',params.seriesName);
				this.$set('selectModelName',params.modelName);
				this.$set('selectNavBar',3);
				
				this.getBSM();
				
			}else{
				this.getBrandDataFn();
			}
			//获取缓存品牌id 车系id
			
		},
		watch: {
			serchTxt(now, old) {
				if(now != '') {
					this.showRightBarBox = false;
				} else {
					this.showRightBarBox = true;
				}
			}
		},
		data: function() {

			return {
				selectNavBar: 0, //选中类型 1：品牌  2：车系  3：车型
				brandList: [], //品牌数据 
				selectBrandName: '品牌', //当前选中的品牌名称
				selectSeriesName: '车系', //当前选中的车系名称
				selectModelName: '车型', //当前选中车型名称        		        
				brandId: 0, // 品牌id
				seriesId: 0, //车系id
				modelId: 0, //车型id
				load: false, //是否在加载
				seriesList: '', //车系数据
				modelFlag: true,
				modelsList: '',
				yearsIndex: 0,
				serchTxt: '',
				selectNavBarSelect: false,
				selectModelSelect: false,
				rightBarHeight: 0,
				offsetTop: 0,
				letterInterval: [],
				currentLetterShow: false,
				currentLetter: null,
				showRightBarBox: true
			}

		},
		methods: {
			showBigImg:function(icon){
				
				var obj = [],imgArray = [];				
				imgArray.push(icon)
				for(var i=0;i<imgArray.length;i++){
					obj[i] = {};
					obj[i].src = imgArray[i];				
					var img = document.createElement('img');
					img.src = imgArray[i]
					obj[i].w = parseInt(img.width);
					obj[i].h = parseInt(img.height);					
				}
				console.log(obj)
				this.$preview.open(0, obj)
			},
			touchstart: function() {
				var targetTop = document.getElementById('rightBar').offsetTop;
				var windowH = document.documentElement.clientHeight;

				let arr = [];
				this.offsetTop = targetTop;
				this.rightBarHeight = parseInt(windowH) - targetTop * 2;
				for(let i = 0; i < this.rightBarHeight / 20; i++) {
					arr.push(i * 20)
				}
				this.$set('letterInterval', arr);

			},
			touchMove: function(e) {
				console.log(this.offsetTop)
				let result = e.touches[0].pageY - this.offsetTop;

				let k = 0;
				let index = 0;
				for(let i = 0; i < this.letterInterval.length; i++) {
					if((result > this.letterInterval[i] && result < this.letterInterval[i + 1]) || result == this.letterInterval[i]) {
						index = i;
						break;
					} else if(result >= this.letterInterval[this.letterInterval.length - 1]) {
						index = this.letterInterval.length - 1;
					} else if(result <= this.letterInterval[0]) {
						index = 0;
					}
				}
				for(let j in this.brandList) {

					if(index == k) {
						let target = j == 1 ? document.querySelector('div[data-tab="1"]') : document.querySelector('div[data-tab=' + j + ']');
						target.scrollIntoView(true);
						this.currentLetterShow = true;
						this.currentLetter = j == 1 ? '热' : j;
						break;
					}
					k++;
				}
			},
			touchEnd: function() {
				this.currentLetterShow = false;
			},
			selectLetter: function(key) {

				let target = key == 1 ? document.querySelector('div[data-tab="1"]') : document.querySelector('div[data-tab=' + key + ']');
				target.scrollIntoView(true);
			},
			selectYears: function(time) {
				this.yearsIndex = time;
			},
			//获取品牌
			getBrandDataFn: function() {

				HQ.callProductApi('BSM', {}, this.getBrandDataCallback)
			},
			getBrandDataCallback: function(data) {

				let _this = this;
				this.setLoading({ 'show': false })
				if(data.number == 200) {
					_this.selectNavBar = 1;
					let obj = {};
					var arr = [];
					for(let i = 0; i < data.result.brand.length; i++) {
						//先拿出热门品牌数据
						if(data.result.brand[i].hot) {
							if(i <= 8) {
								if(obj[1]) {
									obj[1].push(data.result.brand[i]);
								} else {
									obj[1] = [];
									obj[1].push(data.result.brand[i]);
								}
							}
						}
						if(obj[data.result.brand[i].py]) {
							obj[data.result.brand[i].py].push(data.result.brand[i]);
						} else {
							obj[data.result.brand[i].py] = [];
							obj[data.result.brand[i].py].push(data.result.brand[i]);
						}
					}

					_this.$set('brandList', _this.objKeySort(obj));
					console.log(this.brandList)
				} else {
					_this.showTips({
						content: data.message,
						closeTimeout: 2000
					});
				}
			},
			objKeySort: function(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {}; //创建一个新的对象，用于存放排好序的键值对
				for(var i = 0; i < newkey.length; i++) { //遍历newkey数组
					newObj[newkey[i]] = obj[newkey[i]]; //向新创建的对象中按照排好的顺序依次增加键值对
				}
				return newObj; //返回排好序的新对象
			},
			//点击切换类型
			toggleTab: function(index) {
				this.serchTxt = '';
				switch(index) {
					case 1:
						
						this.getBrandDataFn();
						//this.selectNavBar = 1;
						break;
					case 2:

						if(this.selectBrandName == '品牌') {
							this.showTips({
								content: "请先选择品牌",
								closeTimeout: 2000
							});
							return;
						}
						this.seriesId = '';
						this.getBSM();
						this.selectNavBar = 2;

						break;
					case 3:
						if(this.selectSeriesName == '车系') {
							this.showTips({
								content: "请先选择车系",
								closeTimeout: 2000
							});
							return;
						}
						this.selectNavBar = 3;
						this.getBSM();
						break;
				}
			},
			getBSM: function() {
				this.setLoading({ 'show': true })
				HQ.callProductApi('BSM', {
					brandId: this.brandId,
					seriesId: this.seriesId,				
				}, this.setBsmCallback)
			},
			//点击品牌 获取品牌id
			selectBrand: function(target) {
				var local = window.localStorage.getItem('modelParam');
				if(local != null){
					window.localStorage.removeItem('modelParam');
				}
				this.selectBrandName = target.brandName;
				this.selectSeriesName = '车系';
				this.selectModelName = '车型';
				this.brandId = target.id;
				this.yearsIndex = 0;
				this.seriesId = 0;
				this.modelId = 0;
				this.selectNavBar = 2;
				this.serchTxt = '';
				this.getBSM();
			},
			//点击 车系 获取车系id
			selectSeries: function(item) {
				var local = window.localStorage.getItem('modelParam');
				if(local != null){
					window.localStorage.removeItem('modelParam');
				}
				this.selectModelSelect = false
				this.selectSeriesName = item.seriesName;
				this.seriesId = item.id;
				this.modelId = 0;
				this.selectModelName = '车型';
				this.selectNavBar = 3;
				this.yearsIndex = 0;
				this.serchTxt = '';
				this.getBSM();
			},
			setBsmCallback: function(data) {
				this.setLoading({ 'show': false })
				if(data.number == 200) {
					this.load = true;
					//判断当前品牌id是否存在  因为是从setCache拿  所以 brandId一定存在 
					if(this.brandId && !this.seriesId) {
						//不存在获取车系							
						this.$set('seriesList', data.result.series);
						this.selectNavBarSelect = true;

					} else if(this.brandId && this.seriesId) {
						//获取车型
						//当前选择的没有任何车型数据

						if(data.result.model.length <= 0) {
							this.showTips({
								content: '此车系暂未收录任何车型数据',
								closeTimeout: 2000
							});
							this.selectModelSelect = true;
							return;
						}
						let obj = {};
						for(let i = 0; i < data.result.model.length; i++) {
							if(obj[data.result.model[i].years]) {
								obj[data.result.model[i].years].push(data.result.model[i]);
							} else {
								obj[data.result.model[i].years] = [];
								obj[data.result.model[i].years].push(data.result.model[i]);
							}
						}
						this.$set('modelsList', obj);
						console.log(this.modelsList);
						for(let i in this.modelsList) {
							this.yearsIndex = i;
							break;
						}
						this.selectModelSelect = true;

					} else {
						this.showTips({
							content: data.message,
							closeTimeout: 2000
						});
					}
				}
			},
			checkModel: function(item) {
				//保存当前品牌车系车型 id
				console.log(item);
				var modelParam = {
					brandId:item.brandId,
					brandName:item.brandName,
					seriesName:item.seriesName,
					seriesId:item.seriesId,
					modelId:item.id,
					modelName:item.modelName
					
				}
				localStorage.setItem('modelParam',JSON.stringify(modelParam))
				console.log(modelParam);
				HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelDetail?modelId=" + item.id);
			}
		},
		computed: {
			filteredBrandList: function() {
				var filter = Vue.filter('filterBy');
				return filter(this.brandList, this.serchTxt);
			},
			filteredSeriesList: function() {
				var filter = Vue.filter('filterBy');
				return filter(this.seriesList, this.serchTxt);
			},
			filteredModelList: function() {
				var filter = Vue.filter('filterBy');
				return filter(this.modelsList[this.yearsIndex], this.serchTxt);
			}
		},
		components: {
			tips: require("../../components/tips/tips.vue"),
			loading: require("../../components/loading/loading.vue")
		},
		vuex: {
			actions: HQ_Actions,
			getters: HQ_Getters

		},

		//不再当前页就销毁当前对象下的方法
		beforeDestroy: function() {
			delete HQ_CALLBACK.modelSelect;
		}
	}
</script>